<template>
    <div v-html="markdownRander" class="markdown-body"></div>
</template>

<script setup lang="ts">
import markdownit from "markdown-it";
import hljs from 'highlight.js';
import { useMainStore } from "@/store/index";
import { watch ,ref} from "vue";
const MainStore = useMainStore();
const markdownRander = ref('')
const markdown:any = markdownit({
    highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return '<pre><code class="hljs">' +
               hljs.highlight(str, { language: lang, ignoreIllegals: true }).value +
               '</code></pre>';
      } catch (__) {
        console.log('')
      }
    }
    return '<pre><code class="hljs">' + markdown.utils.escapeHtml(str) + '</code></pre>';
  }
})
markdownRander.value = markdown.render(MainStore.state.noteContent)  
watch(
    () => MainStore.state.noteContent,
    (newVal, oldVal) => {
        markdownRander.value = markdown.render(MainStore.state.noteContent);
    }
);

</script>

<style lang="scss" scoped>
@import url("@/assets/styles/github.css");
@import url("@/assets/styles/hljs.css");

.markdown-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    font-size: 20px;
}
</style>
